<template>
  <!--我的审批-公共审批-组件 -->
  <section class="component case-approval-common">
    <el-form :model="applyModel" :rules="rules" label-width="90px" ref="form">
      <h4 class="head-title">队列信息</h4>
      <el-row class="self-dialog">
        <el-col :span="8">
          <el-form-item label="队列代码">
            <el-input v-model.trim="applyModel.queueCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="队列名称">
            <el-input v-model.trim="applyModel.queueName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType !== 'CHANNEL_QUEUE'">
          <el-form-item label="队列类型" class="status">
            <el-select v-model="applyModel.queueCategory" disabled>
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData(
                  'QueueCategory'
                )"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="审批状态" class="status">
            <el-select v-model="applyModel.applyStatus" disabled>
              <el-option
                :key="index"
                :label="item.name"
                :value="item.code"
                v-for="(item, index) in $dict.getDictData('ApplyStatus')"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="8"
          v-if="
            rowType === 'SELF_QUEUE' ||
              rowType === 'OUTSOURCE_QUEUE' ||
              rowType === 'LITIGATION_QUEUE'
          "
        >
          <el-form-item label="转手标识" class="status">
            <el-select v-model="applyModel.changeHandType" disabled>
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData(
                  'ChangeHandType'
                )"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="8"
          v-if="
            rowType === 'SELF_QUEUE' ||
              rowType === 'OUTSOURCE_QUEUE' ||
              rowType === 'LITIGATION_QUEUE' ||
              rowType === 'ROBOT_QUEUE'
          "
        >
          <el-form-item label="锁定到期日期" class="status">
            <el-select v-model="applyModel.lockEndDate" disabled>
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData(
                  'LockEndDate'
                )"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="8"
          v-if="['MONTH_DAY', 'MONTH'].includes(applyModel.lockEndDate)"
        >
          <el-form-item
            :label="
              applyModel.lockEndDate === 'MONTH'
                ? '锁定至第X个自然月'
                : '锁定至第X月'
            "
            prop="expireMonth"
            class="input-style"
          >
            <el-input
              v-model.trim="applyModel.expireMonth"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="8"
          v-if="['MONTH_DAY', 'DAY'].includes(applyModel.lockEndDate)"
        >
          <el-form-item
            :label="
              applyModel.lockEndDate === 'DAY'
                ? '锁定至第X个自然日'
                : '锁定至第X号'
            "
            prop="expireDay"
            class="input-style"
          >
            <el-input v-model.trim="applyModel.expireDay" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="applyModel.lockEndDate === 'SOME'">
          <el-form-item
            label="锁定到某个日期"
            prop="expireDate"
            class="input-style"
          >
            <el-date-picker
              :picker-options="$common.datePickDisabledDate(1)"
              placeholder="请选择日期"
              type="date"
              v-model="applyModel.expireDate"
              value-format="yyyy-MM-dd"
              disabled
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'ROBOT_QUEUE'">
          <el-form-item label="分案日期策略" class="status">
            <el-select v-model="applyModel.divisionStrategyId" disabled>
              <el-option
                v-for="item in dataPolicyArr"
                :label="item.strategyName"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="rowType === 'ROBOT_QUEUE'"  class="calendar">
          <div
            :class="getDateClass(index)"
            v-for="(item, index) in new Date(
              new Date().getFullYear(),
              new Date().getMonth() + 1,
              0
            ).getDate()"
            :key="index"
          >
            {{ index + 1 }}
          </div>
        </el-col>
        <el-col :span="8" v-if="rowType === 'CHANNEL_QUEUE'">
          <el-form-item label="渠道类型" class="status">
            <el-select v-model="applyModel.channelCategory" disabled>
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData(
                  'ChannelCategory'
                )"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'CHANNEL_QUEUE'">
          <el-form-item label="发送对象" class="status">
            <el-select v-model="applyModel.relationship" disabled>
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData(
                  'Relationship'
                )"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请状态" class="status">
            <el-select v-model="applyModel.status" disabled>
              <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('CommonState')"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="rowType === 'CHANNEL_QUEUE'" >
        <el-row v-for="(item, index) in applyModel.channelSettingSet" :key="item.id">
          <el-col :span="8">
            <el-form-item label="发送时间" class="status send-time">
              <el-select
                :value="applyModel.channelSettingSet ? item.sendType : ''"
                disabled
              >
                <el-option
                  :key="index"
                  :label="name"
                  :value="code"
                  v-for="{ index, name, code } in $dict.getDictData('SendType')"
                ></el-option>
              </el-select>&nbsp;-&nbsp;
              <el-input
                :value="applyModel.channelSettingSet ? item.days : ''"
                disabled
                class="send-time-input"
              ></el-input
              >&nbsp;天
            </el-form-item>
          </el-col>
          <!-- <el-col :span="4">
            <el-form-item label="" class="status send-time">
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="发送渠道" class="status send-time">
              <el-select
                v-model="item.sendChannel"
                @change="ChaChannel(index)"
                disabled
              >
                <el-option
                  :key="index"
                  :label="name"
                  :value="code"
                  v-for="{ index, name, code } in $dict.getDictData(
                    'SendChannel'
                  )"
                ></el-option>
              </el-select>&nbsp;-&nbsp;
              <el-select
                class="status send-time"
                v-model="item.priority"
                disabled
              >
                <el-option
                  v-for="{ priority, gradeName, index } in option2"
                  :key="index"
                  :label="gradeName"
                  :value="priority"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="model-select-col">
            <el-form-item label="选择模板" class="status send-time">
              <el-select
                v-model="item.smsTemplateId"
                disabled
              >
                <el-option
                  v-for="{ id, templateName } in option1"
                  :key="id"
                  :label="templateName"
                  :value="id"
                >
                </el-option>
              </el-select>
              <el-button type="text" class="button1" @click="lookTemplate(item.smsTemplateId)"
                >模板预览</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <h4
        class="head-title"
        v-if="
          rowType === 'SELF_QUEUE' ||
            rowType === 'OUTSOURCE_QUEUE' ||
            rowType === 'LITIGATION_QUEUE'
        "
      >
        分配策略
      </h4>
      <el-row
        v-if="
          rowType === 'SELF_QUEUE' ||
            rowType === 'OUTSOURCE_QUEUE' ||
            rowType === 'LITIGATION_QUEUE'
        "
      >
        <el-col :span="8">
          <el-form-item label="分配模式" class="status">
            <el-select v-model="applyModel.distributionMode" disabled>
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData(
                  'DistributionMode'
                )"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="配平方式" class="status">
            <el-select v-model="applyModel.balanceWay" disabled>
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData('BalanceWay')"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="配平维度" class="status">
            <el-select v-model="applyModel.balanceDimension" disabled>
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData(
                  'BalanceDimension'
                )"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="非延滞账户是否参与配平" class="choise-select">
            <el-select v-model="applyModel.state" disabled>
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData('State')"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'SELF_QUEUE' || rowType === 'OUTSOURCE_QUEUE' || rowType === 'LITIGATION_QUEUE'" class="choise-select">
          <el-form-item label="分案日期策略">
            <el-select v-model="applyModel.divisionStrategyId" disabled>
              <el-option
                v-for="item in dataPolicyArr"
                :label="item.strategyName"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="rowType === 'SELF_QUEUE' || rowType === 'OUTSOURCE_QUEUE' || rowType === 'LITIGATION_QUEUE'"  class="calendar">
          <div
            :class="getDateClass(index)"
            v-for="(item, index) in new Date(
              new Date().getFullYear(),
              new Date().getMonth() + 1,
              0
            ).getDate()"
            :key="index"
          >
            {{ index + 1 }}
          </div>
        </el-col>
      </el-row>
      <el-form-item label="添加队列注记" v-if="rowType === 'CHANNEL_QUEUE'">
        <el-input
          :value="applyModel.remark"
          disabled
          type="textarea"
          :maxlength="300"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="申请原因" v-else-if="rowType === 'OUTSOURCE_QUEUE'">
        <el-input
          :value="applyModel.queueRemark"
          disabled
          type="textarea"
          :maxlength="300"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="队列注记" v-else>
        <el-input
          :value="applyModel.queueRemark"
          disabled
          type="textarea"
          :maxlength="300"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        label="队列历史注记"
        v-if="
          rowType === 'SELF_QUEUE' ||
            rowType === 'OUTSOURCE_QUEUE' ||
            rowType === 'LITIGATION_QUEUE'
        "
      >
        <data-box
          :data="applyModel.signHistoryList"
          class="table-page data-box-padding"
        >
          <template slot="columns">
            <el-table-column
              :min-width="$helper.getColumnWidth(3)"
              label="注记时间"
              prop="timeCreated"
              :formatter="row => $filter.dateTimeFormat(row.timeCreated)"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              label="添加人"
              prop="createName"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              :min-width="$helper.getColumnWidth(3)"
              label="内容"
              prop="signContent"
              show-overflow-tooltip
            ></el-table-column>
          </template>
        </data-box>
      </el-form-item>
      <el-row>
        <el-col :span="24">
          <el-form-item label="申请人代号">
            <el-input v-model.trim="applyModel.agentCode" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="审批历史">
        <data-box :data="recordHistory" class="data-box-padding">
          <template slot="columns">
            <el-table-column
              :min-width="$helper.getColumnWidth(3)"
              label="审批人"
              prop="approvalRealName"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              :formatter="row => $filter.dateTimeFormat(row.approvalTime)"
              :min-width="$helper.getColumnWidth(5)"
              label="审批时间"
              prop="approvalTime"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              :formatter="
                row => $filter.dictConvert(row.applyStatus, 'ApplyStatus')
              "
              :min-width="$helper.getColumnWidth(3)"
              label="审批结果"
              prop="applyStatus"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              :min-width="$helper.getColumnWidth(3)"
              label="审批意见"
              prop="approvalOpinion"
              show-overflow-tooltip
            ></el-table-column>
          </template>
        </data-box>
      </el-form-item>
      <el-form-item label="审批意见" prop="approvalOpinion" v-if="rowData.applyStatus==='PENDING'  && rowData.checkUserLinkedList.includes(userId) && type === '审批'">
        <el-input
          :disabled="applyModel.applyStatus !== 'PENDING'"
          type="textarea"
          :maxlength="300"
          v-model.trim="applyModel.approvalOpinion"
          clearable
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <div
      class="confirm-button"
      v-if="applyModel.applyStatus === 'PENDING' && applyModel.checkUserLinkedList.includes(userId) && type === '审批'"
    >
      <el-button @click="commit('REJECT')">拒绝</el-button>
      <el-button @click="commit('PASS')"
        >同意</el-button
      >
    </div>
    <div class="confirm-button" v-else>
      <el-button @click="close">关闭</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
import { Dependencies } from "~/core/decorator"
import { Emit, Prop, Watch } from "vue-property-decorator"
import { State, Getter, Action, namespace } from "vuex-class"
import { CaseApplyRecordService } from "~/services/domain-service/case-apply-record.service"
import { PageService } from "~/utils/page.service"
import { QueueService } from "~/services/domain-service/queue-manage.service"
import { QueueLightService } from "~/services/domain-service/queue-light.service";
import { UserService } from "~/services/management-service/user.service";
import { Form } from 'element-ui'

@Component({
  components: {}
})

export default class CaseApprovalCommon extends Vue {
  public $refs: { form: Form }
  @Dependencies(UserService) private UserService: UserService;
  @Dependencies(PageService) private pageService: PageService
  @Dependencies(QueueService) private QueueService: QueueService
  @Dependencies(CaseApplyRecordService) private caseApplyRecordService: CaseApplyRecordService
  @Dependencies(QueueLightService) private queueLightService: QueueLightService;

  @State private userData

  private option1 = [];
  private option2 = [];
  private checked: boolean = false
  private rules: any = {
    applyStatus: [{ required: true, message: "请选择审批状态" }],
    approvalOpinion: [{ required: true, message: "请输入审批意见" }]
  }
  private applyModel: any = {
    applyStatus: "PASS",
    approvalOpinion: "",
    id: ""
  }
  private dataPolicyArr: string[] = []
  private perDueDate

  @Prop({ required: true }) private rowId: string
  @Prop({ required: true }) private rowName: string
  @Prop({ required: true }) private recordHistory: any
  @Prop({ required: true }) private rowData: any
  @Prop({ required: true }) private rowType: string
  @Prop({ required: true }) private type: string

  @Watch("rowData", { immediate: true }) private idChange(value) {
    this.applyModel = { ...this.rowData }
  }

  @Emit("close") private close() {
    this.reset()
  }

  //选择模板
  private created() {
    this.getSendType()
  }

  private mounted() {
    this.applyModel = { ...this.rowData }
    this.getDatePolicy()
    this.applyModel.channelSettingSet.map((item, index) => {
      this.ChaChannel(index)
    })
  }

  private get userId() {
    return this.userData.id
  }

  private getSendType() {
    this.UserService.getAllSmsTemplate().subscribe(data => {
      const dat1 = data.filter(item=>{
        return item.archive === 0
      })
      this.option1 = data;
    });
  }

  /*
   * 获取日历Itme类名
   */
  private getDateClass(index) {
    return {
      calendarItem: true,
      active: this.dateSelect(index, this.dataPolicyArr)
    };
  }
  /**
   * 反显日期策略日期
   */
  private dateSelect(date, strategyList) {
    const strategy = strategyList.find(
      item => item.id === this.applyModel.divisionStrategyId
    );
    let exist = false;
    if (strategy) {
      exist = strategy.operationDate.split(",").some(item => {
        return item === Number(date) + 1 + "";
      });
    }
    return exist;
  }

  // 发送渠道
  private ChaChannel(index) {
    this.option2 = [];
    if (!this.applyModel.channelSettingSet[index].sendChannel) {
      return false;
    }
    const priority: any = {
      typeCode: this.applyModel.channelSettingSet[index].sendChannel
    };
    this.queueLightService.getGradeById(priority).subscribe(
      data => {
        this.option2 = data;
        
      },
      ({ msg }) => {}
    );
  }

  // 预览模板
  private lookTemplate(val) {
    const par: any = { id: val };
    this.UserService.getAllSmsTemplateById(par).subscribe(data => {
      this.$alert(data.templateContent, "预览模板", {
        confirmButtonText: "确定"
      });
    });
  }

  private reset() {
    this.$refs.form.resetFields()
  }

  private getDatePolicy() {
    this.QueueService.queryAllDateStrategy().subscribe(data => {
      this.dataPolicyArr = data
    })
  }

  private async commit(applyStatus) {
    const result = await this.$refs.form.validate().then(() => true).catch(() => false)
    if (!result) return
    this.applyModel.applyStatus = applyStatus
    this.applyModel.id = this.rowId.split(',')
    this.caseApplyRecordService.dealApply(this.applyModel).subscribe(
      data => {
        this.$message.success("操作成功")
        this.close()
      },
      err => {
        this.applyModel.id = this.rowData.id
        this.close()
      }
    )
  }
  
  private annexCheckClick(row) { // 附件查看
    window.open(row.url, row.fileName)
  }
}
</script>

<style lang="less" scoped>
.button1{
  line-height: 3px;
}
.model-select-col{
  margin-top: -5px;
}
.model-select-col .model-select{
  width: 50% !important;
  margin-left: 30px;
  margin-right: 10px;
}
.calendar {
  overflow: hidden;
  margin: 0 200px 22px;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  .calendarItem {
    float: left;
    width: 10%;
    box-sizing: border-box;
    line-height: 20px;
    text-align: center;
    border-bottom: 1px solid #dcdfe6;
    border-right: 1px solid #dcdfe6;
    &.active {
      background-color: #e4e7ed;
    }
  }
}
.send-time-input{
  width: 82px !important;
}
.data-box-padding{
  padding: 0 !important;
}
/*deep*/
.form-name {
  display: inline-block;
  min-width: 40%;
}
/*deep*/
.el-select, /*deep*/.el-input {
  width: 100% !important;
}
/*deep*/
.el-select-dropdown {
  width: 100% !important;
}
.month-input {
  width: 50px !important;
  margin-left: 30px;
  margin-right: 10px;
}
.head-title {
  margin-left: 24px;
}
</style>
<style lang="less">
.self-dialog{
  .input-style{
    .el-form-item__content{
      margin-left: 0 !important;
    }
    .el-form-item__label{
      width: 120px !important;
    }
    .el-input {
      width: 57% !important;
    }
  }
}
.send-time {
  font-size: 12px !important;
  /*deep*/
  .el-form-item__content {
    display: flex;
  }
}
.table-page {
  /*deep*/
  .el-pagination__sizes {
    width: 80px !important;
  }
  /*deep*/
  .el-input {
    width: 100% !important;
  }
  /*deep*/
  .is-in-pagination {
    width: 45% !important;
  }
}
/*deep*/
.choise-select {
  .el-form-item__label {
    width: 175px !important;
    margin-right: 0;
  }
  /*deep*/
  .el-form-item__content {
    margin-left: 180px !important;
  }
}
.component.case-approval-common {
  .data-box > * {
    padding: 0 !important;
  }
}
</style>
